<template>
	<div>
		<div class="main">
			<div class="TopNav">
				<!-- 主标题 -->
				<div class="topTheme  flexRow">
					<!-- 用户登录 -->
					<router-link to="/login" tag="div" class="user ">
						<img class="icon7" referrerpolicy="no-referrer"
							src="https://lanhu.oss-cn-beijing.aliyuncs.com/psyeei7dq3v8jjtgovqrilcnxdlgrfnmw6j56d639de-a777-4968-b602-8803ff6484c1" />
					</router-link>
					<!-- 软件标题 -->
					<div class="title ">
						<h1>音乐</h1>
					</div>
					<!-- s搜索 -->
					<div class="search ">
						<img class="label6" referrerpolicy="no-referrer"
							src="https://lanhu.oss-cn-beijing.aliyuncs.com/psq8ebtu2it6gtnx01a7p3pneuh20neltae1f0621c-4b56-4fc2-a547-6f89b8b6789a" />
					</div>
				</div>
				<!-- 路由导航 跳转-->
				<div class="routerView ">
					<!-- 引入组件 -->
					<Nav></Nav>
				</div>
				
			</div>
			<!-- 跳转对应的内容 -->
			<div class="component">
				<router-view></router-view>
			</div>
			
		</div>
		
		
	</div>
</template>

<script>
	import Nav from '../components/Nav.vue'
	export default {
		components: {
			Nav
		},
		name: "Layout",
		data() {
			return {

			}
		},
		created() {

		},
		methods: {

		}
	}
</script>

<style>
	.component{
		margin:125px auto auto auto;
	}
	.routerView {
		z-index: 8;
		width: 278px;
		height: 16px;
		margin: 0 auto;
	}

	.user {
		z-index: 11;
		width: 24px;
		height: 23px;
	}

	.title {
		z-index: 13;
		width: 54px;
		height: 17px;
		margin-top: 3px;
	}

	.search {
		z-index: 12;
		width: 17px;
		height: 18px;
		margin-top: 2px;
	}

	

	.topTheme {
		z-index: auto;
		width: 317px;
		height: 23px;
		justify-content: space-between;
		margin: 35px  auto 25px auto;
	}

	.TopNav {
		margin: 0;
		z-index: 1;
		height: 125px;
		background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/pss977474ac3bbsel7h3f3idphylu3219xcf01b65d-cb97-4738-b624-6021bc4b4d0b) -1px -1px no-repeat;
		width: 375px;
		position: absolute;


	}
</style>
